<template>
    <div class="goods">
        <!-- 头部导航 -->
        <div class="header">
            <van-nav-bar
                title="不凡"
                left-text="返回"
                left-arrow
                @click-left="onClickLeft"
            />
        </div>
        <!-- 轮播 -->
        <div class="swiper">
            <van-swipe class="my-swipe" indicator-color="white">
                <van-swipe-item v-for="(item, index) in goods.gallery" :key="index">
                    <img :src="item.img_url" alt="">
                </van-swipe-item>
            </van-swipe>
        </div>
        <!-- 轮播下面 -->
        <div class="swiper-info">
            <div class="info">30天无忧退货</div>
            <div class="info">48小时快速退款</div>
            <div class="info">满88元免邮费</div>
        </div>
        <!-- 商品描述 -->
        <div class="goods-dec" v-if="goods.info">
            <p>{{goods.info.name}}</p>
            <p>{{goods.info.goods_brief}}</p>
            <p>￥{{goods.info.retail_price}}</p>
            <div class="goods-choose">
                <div class="choose-left">请选择规格数量</div>
                <div class="choose-right"></div>
            </div>
        </div>
        <!-- 商品信息 -->
        <div class="goods-info">
            <div class="info-title">
                商品参数
            </div>
            <div class="info-wrapper">
                <ul>
                    <li v-for="(item, index) in goods.attribute" :key="index">
                        <div class="left">{{item.name}}</div>
                        <div class="right">{{item.value}}</div>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 商品关于 -->
        <div class="goods-about" v-if="goods.info" v-html="goods.info.goods_desc">
        </div>
        <div class="goods-problem">
            <div class="title">
                <div class="left"></div>
                <div class="center">常见问题</div>
                <div class="right"></div>
            </div>
            <ul class="problem">
                <li v-for="(item, index) in goods.issue" :key="index">
                    <div>{{item.question}}</div>
                    <div>{{item.answer}}</div>
                </li>
            </ul>
        </div>
        <!-- 大家都在看 -->
        <div class="goods-subList">
            <!-- 标题 -->
            <div class="title">
                <div class="left"></div>
                <div class="center">大家都在看</div>
                <div class="right"></div>
            </div>
            <ul class="list-items">
                <div
                    class="list-item"
                    v-for="(val, index) in goods.productList"
                    :key="index"
                    @click="toGoods(val.id)"
                >
                    <img :src="val.list_pic_url" alt="">
                    <p>{{val.name}}</p>
                    <p>￥{{val.retail_price}}</p>
                </div>
                <div class="list-item moreGoods">
                </div>
            </ul>
        </div>
        <div class="goods-action">
            <!-- 添加到购物车 -->
            <van-goods-action>
                <van-goods-action-icon
                    icon="cart-o"
                    text="购物车"
                    :badge="currentNum"
                    to="/cart"
                />
                <van-goods-action-icon
                    :icon="isCollect ? 'star' : 'star-o'"
                    :text="isCollect ? '已收藏' : '收藏'"
                    color="#ff5000"
                    @click="collect"
                 />
                <van-goods-action-button type="warning" text="加入购物车" @click="show = !show" />
                <van-goods-action-button type="danger" text="立即购买" @click="show = !show" />
            </van-goods-action>
            <!-- 添加商品操作页 -->
            <van-sku
                v-model="show"
                :goods="goodsItem"
                :sku="sku"
                :show-add-cart-btn="false"
                buy-text="加入购物车"
                @buy-clicked="toCar"
            />
        </div>
    </div>
</template>

<script>

import { mapState , mapMutations , mapActions , mapGetters} from 'vuex'
import { addToCarInfo, getCartListInfo } from '@/api/cart/index'
import { addCollectInfo, getCollectListInfo } from '@/api/my/collect/index'
import Vue from 'vue';
import { Toast } from 'vant';

Vue.use(Toast);

export default {
    data() {
        return {
            openId: localStorage.getItem('openId'),
            goodsId: this.$route.query.id,
            currentNum: 0,
            isCollect: false,
            show: false,
            sku: {
                tree: [

                ],
                // 所有 sku 的组合列表，比如红色、M 码为一个 sku 组合，红色、S 码为另一个组合
                list: [

                ],
                price: 0, // 默认价格（单位元）
                stock_num: 0, // 商品总库存
                collection_id: 1, // 无规格商品 skuId 取 collection_id，否则取所选 sku 组合对应的 id
                none_sku: true, // 是否无规格商品
                hide_stock: true // 是否隐藏剩余库存
            },
            goodsItem: {
                // 默认商品 sku 缩略图
                picture: 'https://img.yzcdn.cn/1.jpg'
            },
        }
    },
    watch: {
        $route: function (to, from) {
            this.getGoods(to.query.id)
        },
        // 当商品获取到之后再修改价格和数量
        goods(newval) {
            if (newval) {
                this.sku.stock_num = newval.info.goods_number;
                this.sku.price = newval.info.retail_price;
                this.goodsItem.picture = newval.info.primary_pic_url;
            }
        }
    },
    computed: {
        ...mapState({
            goods: state => state.goods
        })
    },
    methods: {
        // 返回
        onClickLeft() {
            this.$router.go(-1);
        },
        ...mapActions({
            // 异步获取商品详情
            getGoods: 'getGoods'
        }),
        // 大家都在看里的商品跳转
        toGoods(id) {
            this.$router.replace( { path: '/pages/goods', query: { id, } } )
        },
        // 加入购物车
        toCar(skuData) {
            addToCarInfo({goodsId: this.goodsId, number: skuData.selectedNum, openId: this.openId })
            .then(res => {
                Toast.success('添加成功');
                // 刷新商品已有数量
                this.getNum()
            })
        },
        // 当前商品已有数量
        getNum() {
            getCartListInfo({openId: this.openId})
            .then(res => {
                if (res.data.find(el => el.goods_id == this.goodsId)) {
                    this.currentNum = res.data.find(el => el.goods_id == this.goodsId).number;
                }
            })
        },
        // 收藏
        collect() {
            addCollectInfo({ goodsId: this.goodsId, openId: this.openId })
            .then(res => {
                this.isCollect = !this.isCollect;
            })
        }
    },
    created() {
        // 获取商品详情
        this.getGoods(this.goodsId)
        // 当前商品已有数量
        this.getNum()
        // 判断该商品是否收藏
        getCollectListInfo({openId: this.openId})
        .then(res => {
            if (res.collectGoodsList.find(el => el.id == this.goodsId)) {
                this.isCollect = true
            }
        })
    }
}
</script>

<style lang="scss" scoped>
    @mixin title {
        .title{
            height: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
            background: #fff;
            .left,.right{
                height: .01333rem;
                width: 1.33333rem;
                background: #ccc;
            }
            .center{
                padding: 0 10px;
            }
        }
    }
    .goods{
        background: #f4f4f4;
    }
    .header{
        background: #fff;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 9;
    }
    .swiper{
        width: 100%;
        height: 375px;
        background: #f4f4f4;
        margin-top: 1.226667rem;
        .my-swipe .van-swipe-item{
            img{
                width: 100%;
                height: 100%;
            }
        }
    }
    .swiper-info{
        display: flex;
        justify-content: space-around;
        background: #f4f4f4;
        width: 100%;
        height: 45px;
        padding-top: 10px;
        .info{
            text-align: center;
            padding-left: 8px;
            background: url(http://nos.netease.com/mailpub/hxm/yanxuan-wap/p/20150730/style/img/icon-normal/servicePolicyRed-518d32d74b.png) 0 7px no-repeat;
            background-size: 5px 5px;
            align-items: center;
            font-size: .33333rem;
            color: #666;
        }
    }
    .goods-dec{
        width: 100%;
        text-align: center;
        background: #fff;
        p:nth-child(1){
            font-size: .54667rem;
            padding: .26667rem;
        }
        p:nth-child(2){
            margin-bottom: .33333rem;
            font-size: .32rem;
            color: #999;
        }
        p:nth-child(3){
            margin-top: .13333rem;
            font-size: .46667rem;
            color: #b4282d;
        }
        .goods-choose{
            border-top: 2px solid #f4f4f4;
            height: 54px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 10px;
            .choose-right{
                width: 26px;
                height: 26px;
                background: url(../../../assets/img/address_right.png);
                background-size: 100%;
            }
        }
    }
    .goods-info{
        width: 100%;
        box-sizing: border-box;
        padding: 10px;
        background: #fff;
        margin-top: 10px;
        .info-title{
            font-size: .50667rem;
            padding: 10px 0;
        }
        .info-wrapper{
            ul{
                width: 90%;
                margin: 0 auto;
                li{
                    display: flex;
                    padding: 10px 0;
                    margin-bottom: 10px;
                    background: #f4f4f4;
                    .left{
                        width: 1.7rem;
                        font-size: .33333rem;
                        color: #999;
                    }
                    .right{
                        flex: 1;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }
                }
            }
        }
    }
    .goods-problem{
        width: 100%;
        padding: 0 15px 10px 15px;
        box-sizing: border-box;
        background: #fff;
        @include title;
        .problem{
            div:nth-child(1){
                position: relative;
                line-height: .4rem;
                padding-left: .2rem;
                font-size: .34667rem;
                padding-bottom: .2rem;
                color: #303030;
            }
            div:nth-child(1)::after{
                content: '';
                display: block;
                position: absolute;
                top: 6px;
                left: -2px;
                width: 4px;
                height: 4px;
                border-radius: 100%;
                background: #b4282d;
            }
            div:nth-child(2){
                line-height: .53333rem;
                padding-left: .21333rem;
                font-size: .34667rem;
                color: #787878;
                padding-bottom: .33333rem;;
            }
        }
    }
    .goods-subList{
        width: 100%;
        margin-top: 50px;
        @include title;
        .list-items{
            display: flex;
            flex-wrap: wrap;
            justify-content: space-evenly;
            .list-item{
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                margin-bottom: 6px;
                width: 180px;
                background: #fff;
                img{
                    width: 151px;
                    height: 151px;
                }
                p{
                    width: 180px;
                    margin: 0 0 12px 10px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
                p:last-child {
                    color: #9c3232;
                }
            }
            .moreGoods{
                height: 0;
            }
        }
    }
</style>
<style scoped>
    .goods-about>>> p{
        margin: 0;
        padding: 0;
    }
    .goods-about>>> img{
        width: 100%;
    }
</style>
